<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h2 class="text-center">数据展示</h2>
                <table class="table table-hover table-striped">
                    <thred>
                        <tr>
                            <th>ID</th>
                            <th>Username</th>
                            <th>Operation</th>
                        </tr>
                    </thred>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>ckk</td>
                            <td>
                                <a href="#" class="btn btn-xs btn-danger del-btn "del_id='1'>删除</a>
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>mj</td>
                            <td>
                                <a href="#" class="btn btn-xs btn-danger del-btn"del_id='2'>删除</a>
                            </td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>cbt</td>
                            <td>
                                <a href="#" class="btn btn-xs btn-danger del-btn"del_id='3'>删除</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <script>
$('.del-btn').click(function () {
    let $current_btn = $(this); // 提前存储被点击的按钮 后续反复使用

    // 弹出确认框
    swal({
        title: "你确定要删除吗？",
        text: "一旦删除，数据将无法恢复！",
        icon: "warning",
        buttons: true,
        dangerMode: true,
    }).then((is_del) => {
        // 判断用户是否点击了确认按钮
        if (is_del) {
            // 朝后端发送删除数据的请求 完成数据删除
            $.ajax({
                url: '',
                type: 'post',
                data: { 'del_id': $current_btn.attr('del_id') },
                success: function (args) {
                    swal("成功删除数据！", {
                        icon: "success",
                    });
                    // 模拟数据删除的动态效果
                    $current_btn.parent().parent().remove();
                },
                error: function () {
                    swal("删除数据失败！", {
                        icon: "error",
                    });
                }
            });
        } else {
            // 用户点击了取消 无需做
            swal("你怎么怂了", "不敢删吗", "warning");
        }
    });
});

        {#// 给所有的删除按钮绑定点击事件#}
        {#$('.del-btn').click(function (){#}
        {#    let is_del = confirm('你确定要删除吗')#}
        {#    let $current_btn = $(this) // 提前存储被点击的按钮 后续反复使用#}
        {#    // 判断变量是否为真#}
        {#    if(is_del){#}
        {#        // 朝后端发送删除数据的请求 完成数据删除#}
        {#        $.ajax({#}
        {#            url:'',#}
        {#            type:'post',#}
        {#            data:{'del_id':$current_btn.attr('del_id')},#}
        {#            success:function (args){#}
        {#                alert(args)#}
        {#                // 模拟数据删除的动态效果#}
        {#                $current_btn.parent().parent().remove()#}
        {#            }#}
        {#        })#}
        {#    }else {#}
        {#        // 用户点击了取消 无需做#}
        {#        alert('你怎么怂了 不敢删吗')#}
        {#    }#}
        // })
    </script>
</body>
</html>